<template>
  <div>
    <!--首页轮播图结构-->
    <Carousel/>

    <!--首页搜索医院的表单区域-->
    <search/>

    <el-row gutter="20">
      <el-col :span="20">
        <!--等级子组件-->
        <Level @getLevel="getLevel"/>
        <Region @getRegion="getRegion"/>
        <div class="hospital">
          <Card v-for="(item,index) in hospitalArr" :key="index" :hospitalInfo="item" class="item"/>
        </div>
        <!--分页器-->
        <div class="demo-pagination-block">
          <el-pagination
              v-model:current-page="pageNo"
              v-model:page-size="pageSize"
              :background="true"
              :disabled="false"
              :page-sizes="[10, 20, 30, 40]"
              :total="total"
              @current-change="currentChange"
              @size-change="sizeChange"
              layout=" prev, pager, next, jumper,sizes,total"
          />
        </div>
      </el-col>
      <el-col :span="4">
        <tip></tip>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>

import {onMounted, ref} from 'vue'
import {reqHospital} from "@/api/home";
//首页轮播图
import Carousel from './carousel/index.vue'
//首页搜索
import Search from './search/index.vue'
//首页等级
import Level from './level/index.vue'
//首页地区选择
import Region from './region/index.vue'
//展示医院新的卡片组件
import Card from './card/index.vue'
import {Content,HospitalResponseData} from "@/api/home/type.ts"
import Tip from './tip/index.vue'

const pageNo = ref<number>(1)
const pageSize = ref<number>(10)
const hospitalArr = ref<Content>([])
const total = ref<number>(0)
const hostype = ref<string>('')
const districtCode=ref<string>('')

//组件挂载完毕，发一次请求
onMounted(() => {
  getHospitalInfo()
})

const getHospitalInfo = async () => {
  let result:HospitalResponseData = await reqHospital(pageNo.value, pageSize.value,hostype.value,districtCode.value)
  if (result.code === 200) {
    hospitalArr.value = result.data.content
    total.value = result.data.totalElements
  }
}

const currentChange = (value: number) => {
  pageNo.value = value
  getHospitalInfo()
}

const sizeChange = (value: number) => {
  pageSize.value = value
  getHospitalInfo()
}

const getLevel=(level:string)=>{
  hostype.value=level
  getHospitalInfo()
}

const getRegion=(region:string)=>{
  districtCode.value=region
  getHospitalInfo()
}

</script>

<style scoped>

.hospital {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    width: 48%;
    margin: 10px 0;
  }
}

</style>
